<template>
    <div style="display:flex;justify-content:flex-start">
      <label class="bui-radios-label bui-radios-anim" v-for="(item,index) in list" :key="index">
        <input type="radio" name="sex" v-model="value" @change="change" :value="item.value"/>
        <i class="bui-radios"></i>{{item.title}}
      </label>
    </div>
</template>
<script>
export default {
    props:{
      list:{
        type:Array    
      },
      name:{
        type:String
      }    
    },
    data () {
      return {
        value:1
      }    
    },
    methods:{
      change(){
        this.$emit('Change',this.value,this.name)      
      }  
    }
}
</script>
<style lang="css" scoped>
.bui-radios-label{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding:0 .1rem;
}
    label.bui-radios-label input {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
 
label.bui-radios-label .bui-radios {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border: 1px solid #979797;
  border-radius: 50%;
  vertical-align: -2px;
}
 
label.bui-radios-label input:checked + .bui-radios:after {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  background-color: #fff;
  border-radius: 50%;
    top: 4px;
    left: 4px;
}
 
label.bui-radios-label input:checked + .bui-radios {
  background: #00B066;
  border: 1px solid #00B066;
}
 
label.bui-radios-label input:disabled + .bui-radios {
  background-color: #e8e8e8;
  border: solid 1px #979797;
}
 
label.bui-radios-label input:disabled:checked + .bui-radios:after {
  background-color: #c1c1c1;
}
 
label.bui-radios-label.bui-radios-anim .bui-radios {
  -webkit-transition: background-color ease-out .3s;
  transition: background-color ease-out .3s;
}
</style>